<template>
  <!-- 修改客户基本信息 -->
  <div class="tabs-container">
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="客户基本信息">
        <el-row :gutter="15">
          <el-col :span="6" v-for="(item, index) in dataArr" :key="index">
            <el-col class="u-name" :span="12">{{ item.name }}</el-col>
            <el-col class="u-value" :span="12"
              >{{ item.value }}
              <span v-if="item.flag == '1' ? true : false" class="u-btn">
                <template>
                  <el-button
                    type="primary"
                    @click="getfindGroupTree(item, index)"
                    size="mini"
                    :title="item.title"
                  >
                    查看
                  </el-button>
                </template>
              </span>
            </el-col>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="联系人信息">
        <div class="m-tabs-con">
          <div class="u-title"><span class="icon"></span>联系人信息</div>
          <DicTable
            ref="contactInfo"
            stripe
            :columnData="contactInfoTableColumns"
            :tableData="contactInfoTableData"
            :loading="contactInfoTableLoading"
            :currentPage="contactInfoTablePage.pageIndex"
            :pageSize="contactInfoTablePage.pageSize"
            :pager="true"
            @on-page-change="contactInfoHandlePageChange"
          >
            <template #custName="{row}">
              <el-button type="text" @click="editRow(row)">{{
                row.custName
              }}</el-button>
            </template>
          </DicTable>
          <div class="u-title"><span class="icon"></span>关键人信息</div>
          <DicTable
            ref="contactInfo"
            stripe
            :columnData="keyPersonTableColumns"
            :tableData="keyPersonTableData"
            :loading="keyPersonTableLoading"
            :currentPage="contactInfoTablePage.pageIndex"
            :pageSize="keyPersonTablePage.pageSize"
            :pager="true"
            @on-page-change="keyPersonHandlePageChange"
          >
          </DicTable>
          <div class="u-title"><span class="icon"></span>决策链信息</div>
          <DicTable
            ref="contactInfo"
            :columnData="decisionTableColumns"
            :tableData="decisionTableData"
            :loading="decisionTableLoading"
            :currentPage="contactInfoTablePage.pageIndex"
            :pageSize="decisionTablePage.pageSize"
            :pager="true"
            @on-page-change="decisionHandlePageChange"
          >
          </DicTable>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账户信息">
        <div class="u-title"><span class="icon"></span>账户信息</div>
        <DicTable
          ref="contactInfo"
          :columnData="accountInfoTableColumns"
          :tableData="accountInfoTableData"
          :loading="accountInfoTableLoading"
          :currentPage="accountInfoTablePage.pageIndex"
          :pageSize="accountInfoTablePage.pageSize"
          :pager="true"
          @on-page-change="accountInfoHandlePageChange"
        >
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="纳税人信息">
        <div class="u-title"><span class="icon"></span>纳税人信息</div>
        <el-row :gutter="15">
          <el-col :span="6" v-for="(item, index) in taxpayerData" :key="index">
            <el-col class="u-name" :span="12">{{ item.name }}</el-col>
            <el-col class="u-value" :span="12">{{ item.value }} </el-col>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="财务信息">
        <div class="u-title"><span class="icon"></span>财务信息</div>
        <DicTable
          ref="contactInfo"
          :columnData="financialInfoTableColumns"
          :tableData="financialInfoTableData"
          :loading="financialInfoTableLoading"
          :currentPage="financialInfoTablePage.pageIndex"
          :pageSize="financialInfoTablePage.pageSize"
          :pager="true"
          @on-page-change="accountInfoHandlePageChange"
        >
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="竞争信息">
        <div class="u-title"><span class="icon"></span>竞争信息</div>
        <DicTable
          ref="contactInfo"
          :columnData="competitiveInfoTableColumns"
          :tableData="competitiveInfoTableData"
          :loading="competitiveInfoTableLoading"
          :currentPage="competitiveInfoTablePage.pageIndex"
          :pageSize="competitiveInfoTablePage.pageSize"
          :pager="true"
          @on-page-change="competitiveInfoHandlePageChange"
        >
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="发展战略信息">
        <div class="u-title"><span class="icon"></span>发展战略信息</div>
        <DicTable
          ref="contactInfo"
          :columnData="DevelopTableColumns"
          :tableData="DevelopTableData"
          :loading="DevelopTableLoading"
          :currentPage="DevelopTablePage.pageIndex"
          :pageSize="DevelopTablePage.pageSize"
          :pager="true"
          @on-page-change="DevelopHandlePageChange"
        >
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="信息化信息">
        <div class="u-title"><span class="icon"></span>信息化信息</div>
        <DicTable
          ref="contactInfo"
          :columnData="informationTableColumns"
          :tableData="informationTableData"
          :loading="informationTableLoading"
          :currentPage="informationTablePage.pageIndex"
          :pageSize="informationTablePage.pageSize"
          :pager="true"
          @on-page-change="informationHandlePageChange"
        >
        </DicTable>
      </el-tab-pane>
      <el-tab-pane label="割接通知信息">
        <div class="u-title"><span class="icon"></span>割接通知信息</div>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-col class="u-name" :span="6">客户名称:</el-col>
            <el-col class="u-value" :span="18">重点用例客户测试1 </el-col>
          </el-col>
          <el-col :span="24">
            <el-col class="u-name" :span="6">客户经理A</el-col>
            <el-col class="u-value" :span="18"
              >系统管理员\crm@ct1000.com\15733281244</el-col
            >
          </el-col>
          <el-col :span="24">
            <el-col class="u-name" :span="6">客户经理B</el-col>
            <el-col class="u-value" :span="18"
              >系统管理员\crm@ct1000.com\15733281244</el-col
            >
          </el-col>
          <el-col :span="24">
            <el-col class="u-name" :span="6">切割信息</el-col>
            <el-col class="u-value" :span="18">111</el-col>
          </el-col>
          <el-form ref="form" :model="form" label-width="100px">
            <el-row>
              <el-col class="u-name" :span="6"
                >割接影响业务时长是否通知:</el-col
              >
              <el-col class="u-value" :span="18">
                <dic-radio-group v-model="form.notice">
                  <dic-radio-button label="是"></dic-radio-button>
                  <dic-radio-button label="否"></dic-radio-button>
                </dic-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="u-name" :span="6">带宽型产品中断类型:</el-col>
              <el-col class="u-value" :span="18">
                <el-checkbox-group v-model="form.noticeCheckValue" size="mini">
                  <el-checkbox-button
                    v-for="item in noticeArr"
                    :label="item"
                    :key="item"
                    >{{ item }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="u-name" :span="6">平台型产品中断类型:</el-col>
              <el-col class="u-value" :span="18">
                <el-checkbox-group v-model="form.proCheckValue" size="mini">
                  <el-checkbox-button
                    v-for="item in proArr"
                    :label="item"
                    :key="item"
                    >{{ item }}</el-checkbox-button
                  >
                </el-checkbox-group>
              </el-col>
            </el-row>
            <el-row class="m-box">
              <el-col class="u-name" :span="6"
                >割接影响业务时间点是否通知:
              </el-col>
              <el-col class="u-value" :span="18">
                <el-checkbox-group v-model="form.cutTimeValue" size="mini">
                  <el-checkbox-button
                    v-for="item in cutTimeArr"
                    :label="item"
                    :key="item"
                    class="check-box"
                  >
                    {{ item }}
                  </el-checkbox-button>
                </el-checkbox-group>
              </el-col>
            </el-row>
            <el-row class="m-box">
              <el-col class="u-name" :span="6">割接通知方式: </el-col>
              <el-col class="u-value" :span="18">
                <el-form-item label="活动名称">
                  <dic-radio-group v-model="form.notice">
                    <dic-radio-button label="是"></dic-radio-button>
                    <dic-radio-button label="否"></dic-radio-button>
                  </dic-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="m-box">
              <el-col class="u-name" :span="6"></el-col>
              <el-col class="u-value" :span="18">
                <dic-radio-group v-model="form.cutTimeNoticeValue" size="mini">
                  <dic-radio-button
                    v-for="item in cutTimeNoticeArr"
                    :label="item"
                    :key="item"
                    class="check-box"
                  >
                    {{ item }}
                  </dic-radio-button>
                </dic-radio-group>
              </el-col>
            </el-row>

            <el-row class="m-box">
              <el-col class="u-name" :span="6">割接通知语种((中文))</el-col>
              <el-col class="u-value" :span="18">
                <el-radio-group v-model="form.cutTimeNoticeValue">
                  <el-radio :label="3">是</el-radio>
                  <el-radio :label="6">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row class="m-box">
              <el-col class="u-name" :span="6">割接通知语种(英文)：</el-col>
              <el-col class="u-value" :span="18">
                <el-radio-group v-model="form.cutTimeNoticeValue">
                  <el-radio :label="3">是</el-radio>
                  <el-radio :label="6">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="u-name" :span="6">割接通知是否同步给网厅:</el-col>
              <el-col class="u-value" :span="18">
                <el-radio-group v-model="form.cutTimeSyncValue">
                  <span>中文</span>
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <el-row>
              <el-col class="u-name" :span="6">接收单位联系信息:</el-col>
              <el-col class="u-value" :span="18">
                1111
              </el-col>
            </el-row>
          </el-form>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
export default {
  name: "editCustBaseInfo",
  data() {
    return {
      tabPosition: "top",
      //   基本信息tabs内容
      dataArr: [
        { name: "客户名称", value: "111", flag: "0" },
        { name: "客户编码", value: "111", flag: "0" },
        { name: "客户状态", value: "25232152", flag: "0" },
        { name: "行业类型", value: "222", flag: "0" },
        { name: "细分市场", value: "222", flag: "0" },
        { name: "客户类别", value: "222", flag: "0" },
        { name: "营销责任地", value: "222", flag: "0" },
        { name: "总部所在国家", value: "222", flag: "0" },
        { name: "客户性质", value: "222", flag: "0" },
        { name: "证件类型", value: "222", flag: "0" },
        { name: "证件号码", value: "222", flag: "1" },
        { name: "证件地址", value: "222", flag: "1" },
        { name: "管控级别", value: "222", flag: "0" },
        { name: "直管类型", value: "222", flag: "0" },
        { name: "客户服务等级", value: "222", flag: "0" },
        { name: "客户经理", value: "222", flag: "0" },
        { name: "售后服务等级", value: "222", flag: "0" },
        { name: "大客户级别", value: "222", flag: "0" },
        { name: "客户经理", value: "222", flag: "0" },
        { name: "售后服务等级", value: "222", flag: "0" },
        { name: "大客户级别", value: "222", flag: "0" },
        { name: "企业员工数", value: "222", flag: "0" },
        { name: "省行业经理", value: "222", flag: "0" },
        { name: "本地网行业经理", value: "222", flag: "0" },
        { name: "客户地址", value: "222", flag: "1" },
      ],

      //客户基本信息-联系人信息
      contactInfoTableColumns: [
        { field: "custContact", title: "客户联系人", width: 200 },
        {
          slotName: "custName",
          title: "姓名",
          width: 150,
        },
        { field: "custSex", title: " 性别 ", width: 180 },
        { field: "homePhone", title: "家庭电话 ", width: 180 },
        {
          field: "contactPhone",
          title: " 联系电话 ",
          width: 300,
        },
        {
          field: "email",
          title: " 电子邮箱",
          width: 200,
        },
        {
          field: "zipCode",
          title: " 邮编 ",
          width: 150,
        },
        {
          field: "contactAddress",
          title: " 联系地址",
          width: 400,
        },
      ],
      contactInfoTableData: [
        {
          id: 10001,
          custContact: "2021-03-10",
          custName: "T1",
          custSex: "黑龙江",
          homePhone: "李四",
          contactPhone: "13189897980",
          email: "张三",
          zipCode: "7811999199449",
          contactAddress: "营业执照",
        },
        {
          id: 10002,
          custContact: "2021-03-10",
          custName: "T1",
          custSex: "男",
          homePhone: "13189897980",
          contactPhone: "13189897980",
          email: "tydic@aaa.com",
          zipCode: "7811999199449",
          contactAddress: "营业执照",
        },
      ],
      contactInfoTableLoading: false,
      contactInfoTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },
      //关键人信息-联系人信息
      keyPersonTableColumns: [
        // { type: "id", width: 50, fixed: null },
        { field: "keyPersonType", title: "关键人类型", width: 200 },
        { field: "keyPersonName", title: "姓名", width: 150 },
        { field: "department", title: " 部门 ", width: 180 },
        {
          field: "contactPhone",
          title: " 联系电话 ",
          width: 200,
          showOverflow: true,
        },
        {
          field: "email",
          title: " 电子邮箱",
          width: 200,
          showOverflow: true,
        },
        {
          field: "position",
          title: " 职务 ",
          width: 150,
          showOverflow: true,
        },
        {
          field: "birthday",
          title: " 生日",
          width: 300,
          showOverflow: true,
        },
        {
          field: "ability",
          title: "决策影响力",
          width: 300,
          showOverflow: true,
        },
      ],
      keyPersonTableData: [
        {
          id: 10001,
          keyPersonType: "2021-03-10",
          keyPersonName: "T1",
          department: "黑龙江",
          contactPhone: "李四",
          email: "13189897980",
          position: "张三",
          birthday: "7811999199449",
          ability: "营业执照",
        },
        {
          id: 10002,
          keyPersonType: "2021-03-10",
          keyPersonName: "T1",
          department: "黑龙江",
          contactPhone: "李四",
          email: "13189897980",
          position: "张三",
          birthday: "7811999199449",
          ability: "营业执照",
        },
      ],
      keyPersonTableLoading: false,
      keyPersonTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },
      //  决策链信息
      decisionTableColumns: [
        { field: "decisionBusinessType", title: "决策链类型", width: 200 },
        { field: "keyPersonName", title: "关键人", width: 150 },
        { field: "decisionOrder", title: " 决策链顺序 ", width: 180 },
        {
          field: "role",
          title: " 角色 ",
          width: 200,
          showOverflow: true,
        },
        {
          field: "department",
          title: " 部门",
          width: 200,
          showOverflow: true,
        },
        {
          field: "isEndKeyPersonName",
          title: " 是否是最终决策人 ",
          width: 450,
          showOverflow: true,
        },
        {
          field: "mainResponsiby",
          title: " 主要负责工作",
          width: 300,
          showOverflow: true,
        },
      ],
      decisionTableData: [
        {
          id: 10001,
          decisionBusinessType: "2021-03-10",
          keyPersonName: "T1",
          decisionOrder: "黑龙江",
          role: "李四",
          department: "13189897980",
          isEndKeyPersonName: "张三",
          mainResponsiby: "7811999199449",
        },
        {
          id: 10002,
          decisionBusinessType: "2021-03-10",
          keyPersonName: "T1",
          decisionOrder: "黑龙江",
          role: "李四",
          department: "13189897980",
          isEndKeyPersonName: "张三",
          mainResponsiby: "7811999199449",
        },
      ],
      decisionTableLoading: false,
      decisionTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      // 账户信息
      accountInfoTableColumns: [
        { field: "defaultAccountInfo", title: " 默认账户 ", width: 200 },
        { field: "accountCode", title: "账户编码", width: 150 },
        { field: "accountName", title: " 账户名称 ", width: 180 },
        {
          field: "accountStatus",
          title: " 账户状态 ",
          width: 200,
          showOverflow: true,
        },
        {
          field: "accountType",
          title: " 账户状态",
          width: 200,
          showOverflow: true,
        },
        {
          field: "bankName",
          title: " 银行名称 ",
          width: 200,
          showOverflow: true,
        },
        {
          field: "bankAccount",
          title: " 银行账号",
          width: 300,
          showOverflow: true,
        },
        {
          field: "billMethod",
          title: " 账单投递方式",
          width: 300,
          showOverflow: true,
        },
        {
          field: "billAddress",
          title: "账单地址",
          width: 300,
          showOverflow: true,
        },
      ],
      accountInfoTableData: [
        {
          id: 10001,
          defaultAccountInfo: "2021-03-10",
          accountCode: "T1",
          accountName: "黑龙江",
          accountStatus: "李四",
          accountType: "13189897980",
          bankName: "张三",
          bankAccount: "7811999199449",
          billMethod: "7811999199449",
          billAddress: "7811999199449",
        },
        {
          id: 10001,
          defaultAccountInfo: "2021-03-10",
          accountCode: "T1",
          accountName: "黑龙江",
          accountStatus: "李四",
          accountType: "13189897980",
          bankName: "张三",
          bankAccount: "7811999199449",
          billMethod: "7811999199449",
          billAddress: "7811999199449",
        },
      ],
      accountInfoTableLoading: false,
      accountInfoTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      //  纳税人信息
      taxpayerData: [
        {
          name: "纳税客户名称",
          value: "重点用例客户测试1重点用例客户测试1重点用例客户测试1 ",
        },
        { name: "是否一般纳税人", value: "否 " },
        { name: "客户状态", value: "25232152" },
        { name: "是否开增值税发票", value: "222" },
        { name: "税务登记号", value: "222" },
        { name: "税务登记号所属省份", value: "222" },
        { name: "税务登记联系电话", value: "222" },
        { name: "税务开户银行名称", value: "222" },
        { name: "税务开户银行账号", value: "222" },
        { name: "开票点", value: "222" },
        { name: "提交税务审核日期", value: "222" },
        { name: "审核状态", value: "222" },
        { name: "税务审核通过日期", value: "222" },
        { name: "通知短信手机号", value: "222" },
        { name: "通知邮箱号", value: "222" },
        { name: "取票方式", value: "222" },
        { name: "邮编", value: "222" },
        { name: "已上传纳税人证件", value: "222" },
        { name: "税务登记地址", value: "222" },
        { name: "邮寄地址", value: "222" },
      ],
      // 财务信息
      financialInfoTableColumns: [
        { field: "custYearIncome", title: "客户年收入", width: 150 },
        { field: "costBudget", title: "  信息化费用预算  ", width: 180 },
        {
          field: "consumptionInfo",
          title: "年信息化消费 ",
          width: 380,
        },
        {
          field: "share",
          title: " 中国电信份额 ",
          width: 380,
        },
        {
          field: "subsidyPolicy",
          title: " 员工通信费补贴政策 ",
          width: 380,
        },
      ],
      financialInfoTableData: [
        {
          id: 10001,
          custYearIncome: "2021-03-10",
          costBudget: "T1",
          consumptionInfo: "黑龙江",
          share: "李四",
          subsidyPolicy: "13189897980",
        },
        {
          id: 10001,
          custYearIncome: "2021-03-10",
          costBudget: "T1",
          consumptionInfo: "黑龙江",
          share: "李四",
          subsidyPolicy: "13189897980",
        },
      ],
      financialInfoTableLoading: false,
      financialInfoTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      //  竞争信息
      competitiveInfoTableColumns: [
        { field: "competitorName", title: "竞争对手名称", width: 350 },
        {
          field: "competitiveBusinessType",
          title: "  竞争业务类型  ",
          width: 350,
        },
        {
          field: "competitorMarket",
          title: "竞争对手市场份额 ",
          width: 350,
        },
      ],
      competitiveInfoTableData: [
        {
          id: 10001,
          competitorName: "2021-03-10",
          competitiveBusinessType: "T1",
          competitorMarket: "黑龙江",
        },
        {
          id: 10002,
          competitorName: "2021-03-10",
          competitiveBusinessType: "T1",
          competitorMarket: "黑龙江",
        },
      ],
      competitiveInfoTableLoading: false,
      competitiveInfoTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      // 发展战略信息
      DevelopTableColumns: [
        { field: "competitorName", title: "竞争对手名称", width: 350 },
        {
          field: "competitiveBusinessType",
          title: "  竞争业务类型  ",
          width: 350,
        },
        {
          field: "competitorMarket",
          title: "竞争对手市场份额 ",
          width: 350,
        },
      ],
      DevelopTableData: [
        {
          id: 10001,
          competitorName: "2021-03-10",
          competitiveBusinessType: "T1",
          competitorMarket: "黑龙江",
        },
        {
          id: 10002,
          competitorName: "2021-03-10",
          competitiveBusinessType: "T1",
          competitorMarket: "黑龙江",
        },
      ],
      DevelopTableLoading: false,
      DevelopTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },

      // 信息化信息
      informationTableColumns: [
        { field: "competitorName", title: "竞争对手名称", width: 350 },
        {
          field: "competitiveBusinessType",
          title: "  竞争业务类型  ",
          width: 350,
        },
        {
          field: "competitorMarket",
          title: "竞争对手市场份额 ",
          width: 350,
        },
      ],
      informationTableData: [
        {
          id: 10001,
          competitorName: "2021-03-10",
          competitiveBusinessType: "T1",
          competitorMarket: "黑龙江",
        },
        {
          id: 10002,
          competitorName: "2021-03-10",
          competitiveBusinessType: "T1",
          competitorMarket: "黑龙江",
        },
      ],
      informationTableLoading: false,
      informationTablePage: {
        pageIndex: 1,
        pageSize: 10,
        totalResult: 0,
      },
      //form
      // noticeArr: [""],
      noticeArr: [
        "秒级的保护倒换认为不中断",
        "1秒以上至5分钟以内的瞬断",
        "5分钟以上中断",
      ],
      proArr: [
        "秒级的保护倒换认为不中断",
        "1秒以上至5分钟以内的瞬断",
        "5分钟以上中断",
      ],
      cutTimeArr: ["全天", "0点-6点", "6点-12点", "12点-18点", "18点-24点"],
      // 割接通知方式:radio
      cutTimeNoticeArr: [
        "所有时间段发送割接通知",
        "仅当天16点:30分之后到第二天8:30之前收到，且这段时间内要完成的割接通知",
        "所有时间段发送的割接通知均不发送短信通知",
      ],
      form: {
        notice: "1",
        noticeCheckValue: "秒级的保护倒换认为不中断",
        proCheckValue: "秒级的保护倒换认为不中断",
        proRadioValue: "是",
        cutTimeValue: "全天",
        cutTimeNoticeValue: "2",
      },
      // 割接通知是否同步给网厅:
      cutTimeSyncArr: ["是", "否"],
      cutTimeSyncValue: "1",
      // 割接通知语种
      cutTimeLanguagesZ: ["是", "否"],
      cutTimeLanguagesZValue: "是",
      cutTimeLanguagesE: ["是", "否"],
      cutTimeLanguagesEValue: "是",
    };
  },
  components: {
    DicTable,
  },
  created() {},
  mounted() {},
  methods: {
    //基本信息tabs查看
    getfindGroupTree(item, index) {
      
      
    },
    //联系人信息分页
    contactInfoHandlePageChange() {},
    //关键人信息分页
    keyPersonHandlePageChange() {},
    // 决策链信息分页
    decisionHandlePageChange() {},
    // 账户信息分页
    accountInfoHandlePageChange() {},
    // 竞争信息
    competitiveInfoHandlePageChange() {},
    //发展战略信息
    DevelopHandlePageChange() {},
    // 信息化信息
    informationHandlePageChange() {},
  },
};
</script>
<style lang="scss" scoped>
.tabs-container {
  margin: 10px 20px;
  font-size: 14px;
}
.u-title {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #0052d9;
  font-size: 12px;
}
.u-title .icon {
  float: left;
  display: block;
  width: 4px;
  height: 12px;
  background: #f56f3c;
  margin-top: 2px;
  margin-right: 10px;
  font-size: 14px;
}
.tabs-container .u-name,
.tabs-container .u-value {
  height: 50px;
  line-height: 50px;
}
.tabs-container .u-name {
  text-align: right;
  line-height: normal;
  color: #666;
}
.tabs-container .u-value {
  text-align: left;
  line-height: normal;
  color: #999;
}
.u-btn {
  margin-left: 10px;
}
.m-box {
  padding-bottom: 20px;
}
.m-box .u-value {
  padding-bottom: 20px;
}
.radio-box {
  margin-bottom: 20px;
}
.check-box {
  margin-bottom: 20px;
}
</style>
